<template>
    <div id="page">
        <el-form :inline="true" class="demo-form-inline" @submit.native.prevent>
            <el-form-item :label="$t('商品名称')">
                <el-input :placeholder="$t('商品名称')" @keydown.native.enter="search" ></el-input>
            </el-form-item>
<!--            <el-form-item>-->
<!--                <el-button type="primary" @click="search">{{ $t('查询') }}</el-button>-->
<!--            </el-form-item>-->

            <el-form-item>
                <el-button type="primary" @click="add">{{ $t('添加商品') }}</el-button>
            </el-form-item>
        </el-form>


        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="id" :label="$t('ID')" width="80"></el-table-column>
            <el-table-column prop="name" :label="$t('商品名称')" width="120"> </el-table-column>
            <el-table-column prop="codes" :label="$t('商品编码')" width="200"> </el-table-column>
            <el-table-column prop="in_price" :label="$t('商品进价')" width="80"> </el-table-column>
            <el-table-column prop="sell_price" :label="$t('商品售价')" width="300"> </el-table-column>
            <el-table-column prop="tax_rate" :label="$t('税率')" width="80"> </el-table-column>
            <el-table-column prop="number" :label="$t('库存')" width="80"> </el-table-column>

            <el-table-column fixed="right" :label="$t('操作')" width="180">
                <template slot-scope="scope">
                    <el-button @click="edit(scope.row)" type="text" size="small">{{ $t('编辑') }}</el-button>
                    <el-button @click="del(scope.row)" type="text" size="small">{{ $t('删除') }}</el-button>
                    <el-button @click="inWarehouse(scope.row)" type="text" size="small">{{ $t('入库') }}</el-button>
                    <el-button @click="outWarehouse(scope.row)" type="text" size="small">{{ $t('出库') }}</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div style="display: flex;align-items: center;justify-content: center;margin-top:10px">
            <el-pagination background layout="prev, pager, next" :total="1000"> </el-pagination>
        </div>


        <el-dialog :title="addFormTitle" :visible.sync="addProductVisible">
            <el-form :model="addProductData">
                <el-form-item :label="$t('商品名称')" label-width="100px">
                    <el-input v-model="addProductData.name" autocomplete="off" ref="ProductName"></el-input>
                </el-form-item>

                <el-form-item :label="$t('商品编码')" label-width="100px">
                    <el-tag :key="tag" v-for="tag in addProductData.codes" closable
                        :disable-transitions="false" @close="handleClose(tag)">
                        {{tag}}
                    </el-tag>
                    <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput"
                        size="small"  @blur="handleInputConfirm"
                    >
                    </el-input>
                    <el-button v-else class="button-new-tag" size="small" @click="showInput">+ {{ $t('添加一个编码') }}</el-button>
                </el-form-item>

                <el-form-item :label="$t('商品类型')" label-width="100px">
                    <el-radio-group v-model="addProductData.type" size="small">
                        <el-radio-button :label="$t('酒水')" value="1"></el-radio-button>
                        <el-radio-button :label="$t('零食')" value="2" ></el-radio-button>
                        <el-radio-button :label="$t('散货')" value="3"></el-radio-button>
                    </el-radio-group>
                </el-form-item>

                <el-form-item :label="$t('商品进价')" label-width="100px">
                    <el-input type="number" v-model="addProductData.in_price" autocomplete="off" @change="setSellPrice"></el-input>
                </el-form-item>

                <el-form-item :label="$t('商品售价')" label-width="100px">
                    <div>{{ $t('买') }}<input class="small" type="number" v-model="addProductData.sellPrice[0]">{{$t('个,每个')}}<input class="small" type="number" v-model="addProductData.sellPrice[1]"></div>
                    <div>{{ $t('买') }}<input class="small" type="number" v-model="addProductData.sellPrice[2]">{{$t('个,每个')}}<input class="small" type="number" v-model="addProductData.sellPrice[3]"></div>
                    <div>{{ $t('买') }}<input class="small" type="number" v-model="addProductData.sellPrice[4]">{{$t('个,每个')}}<input class="small" type="number" v-model="addProductData.sellPrice[5]"></div>
                    <div>{{ $t('买') }}<input class="small" type="number" v-model="addProductData.sellPrice[6]">{{$t('个,每个')}}<input class="small" type="number" v-model="addProductData.sellPrice[7]"></div>
                </el-form-item>

                <el-form-item :label="$t('税率')" label-width="100px">
                    <el-input-number v-model="addProductData.tax_rate" :precision="2" :step="0.01" :max="1" :min="0"></el-input-number>
                </el-form-item>

            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="addProductVisible = false">{{ $t('取消') }}</el-button>
                <el-button type="primary" @click="saveProduct">{{ $t('保存') }}</el-button>
            </div>
        </el-dialog>


        <el-dialog :title="WarehouseTitle" :visible.sync="addWarehouseVisible">
            <table class="matable">
                <tr>
                    <td>{{ $t('商品名称') }}</td>
                    <td>{{ $t('价格') }}</td>
                    <td>{{ $t('数量') }}</td>
                    <td>{{ $t('时间') }}</td>
                </tr>
                <tr v-for="item in warehouseLoglist" v-bind:key="item.id">
                    <td>{{ item.name}}</td>
                    <td>{{ item.price }}</td>
                    <td>{{ item.number }}</td>
                    <td>{{ item.time }}</td>
                </tr>
            </table>

            <el-form :model="addWarehouseData" style="margin-top: 20px">


                <el-form-item :label="$t('价格')" label-width="100px">
                    <el-input type="number" v-model="addWarehouseData.price" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item :label="$t('数量')" label-width="100px">
                    <el-input type="number" v-model="addWarehouseData.number" autocomplete="off" ></el-input>
                </el-form-item>
                <el-form-item :label="$t('备注')" label-width="100px">
                    <el-input v-model="addWarehouseData.detail" autocomplete="off" ></el-input>
                </el-form-item>

            </el-form>

            <div slot="footer" class="dialog-footer">
                <el-button @click="addWarehouseData = false">{{ $t('取消') }}</el-button>
                <el-button type="primary" @click="saveWareHouseLog">{{ $t('提交') }}</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
export default {


    data() {
        return {
            doingRow:{},
            warehouseLoglist:[{
                name:"棒棒糖",
                price:"20",
                number:"30",
                time:"2023-11-21"
            },{
                name:"棒棒糖",
                price:"20",
                number:"30",
                time:"2023-11-22"
            },{
                name:"棒棒糖",
                price:"20",
                number:"30",
                time:"2023-11-23"
            }],
            addWarehouseData:{

            },
            WarehouseTitle:"",
            addFormTitle:"",
            addProductData:{
                type:"",
                name:"",
                codes:[],
                in_price:"",
                tax_rate:0.00,
                sellPrice:[1,0,5,0,10,0,20,0]
            },
            inputVisible: false,
            inputValue: '',
            addProductVisible:false,
            addWarehouseVisible:false,
            tableData: [
                {
                id:"1",
                name:"棒棒糖",
                codes:"20122012,20122013,20122014",
                in_price:"26",
                sell_price:"1->32 ; 5->30 ; 10->28 ; 15->27",
                tax_rate:"1%",
                number:"100"
            },{
                id:"1",
                name:"棒棒糖",
                    codes:"20122012,20122013,20122014",
                in_price:"26",
                sell_price:"1->32 ; 5->30 ; 10->28 ; 15->27",
                tax_rate:"1%",
                number:"100"
            },{
                id:"1",
                name:"棒棒糖",
                    codes:"20122012,20122013,20122014",
                in_price:"26",
                sell_price:"1->32 ; 5->30 ; 10->28 ; 15->27",
                tax_rate:"1%",
                number:"100"
            },{
                id:"1",
                name:"棒棒糖",
                    codes:"20122012,20122013,20122014",
                in_price:"26",
                sell_price:"1->32 ; 5->30 ; 10->28 ; 15->27",
                tax_rate:"1%",
                number:"100"
            },{
                id:"1",
                name:"棒棒糖",
                    codes:"20122012,20122013,20122014",
                in_price:"26",
                sell_price:"1->32 ; 5->30 ; 10->28 ; 15->27",
                tax_rate:"1%",
                number:"100"
            },{
                id:"1",
                name:"棒棒糖",
                    codes:"20122012,20122013,20122014",
                in_price:"26",
                sell_price:"1->32 ; 5->30 ; 10->28 ; 15->27",
                tax_rate:"1%",
                number:"100"
            },{
                id:"1",
                name:"棒棒糖",
                    codes:"20122012,20122013,20122014",
                in_price:"26",
                sell_price:"1->32 ; 5->30 ; 10->28 ; 15->27",
                tax_rate:"1%",
                number:"100"
            },{
                id:"1",
                name:"棒棒糖",
                    codes:"20122012,20122013,20122014",
                in_price:"26",
                sell_price:"1->32 ; 5->30 ; 10->28 ; 15->27",
                tax_rate:"1%",
                number:"100"
            },{
                id:"1",
                name:"棒棒糖",
                    codes:"20122012,20122013,20122014",
                in_price:"26",
                sell_price:"1->32 ; 5->30 ; 10->28 ; 15->27",
                tax_rate:"1%",
                number:"100"
            }]
        }
    },
    methods: {
        search(){
            this.toast("search")
        },
        saveWareHouseLog(){
            this.addWarehouseVisible = false
        },
        saveProduct(){
            this.addProductVisible = false
        },
        setSellPrice(){
            // console.log(this.addProductData.sellPrice);
            //
            // if (this.addProductData.sellPrice[1] == 0 && this.addProductData.sellPrice[3] == 0 && this.addProductData.sellPrice[5] == 0  && this.addProductData.sellPrice[7] == 0){
            //     this.addProductData.sellPrice[1] = parseInt(this.addProductData.in_price);
            //     this.addProductData.sellPrice[3] = parseInt(this.addProductData.in_price);
            //     this.addProductData.sellPrice[5] = parseInt(this.addProductData.in_price);
            //     this.addProductData.sellPrice[7] = parseInt(this.addProductData.in_price);
            // }
        },
        showInput() {
            this.inputVisible = true;
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        },
        handleInputConfirm() {
            let inputValue = this.inputValue;
            if (inputValue) {
                this.addProductData.codes.push(inputValue);
            }
            this.inputVisible = false;
            this.inputValue = '';
        },
        handleClose(tag) {
            this.addProductData.codes.splice(this.addProductData.codes.indexOf(tag), 1);
        },
        add(){
            this.addFormTitle = this.$t('添加商品');
            this.addProductVisible = true;
            this.$nextTick(function (){
                this.$refs.ProductName.focus();
            })

        },
        edit(row) {
            this.addFormTitle = this.$t('编辑商品');
            this.addProductVisible = true;

            console.log(row);
        },
        del(row) {
            this.$confirm(this.$t('删除确认'), this.$t('提示'), {}).then(() => {
                this.tableData.splice(this.tableData.indexOf(row), 1);
            }).catch(() => {

            });
        },
        inWarehouse(row) {
            this.doingRow = row;
            this.WarehouseTitle = row.name+" "+this.$t('入库');
            this.addWarehouseVisible = true;
        },
        outWarehouse(row) {
            this.doingRow = row;
            this.WarehouseTitle = row.name+" "+this.$t('出库');
            this.addWarehouseVisible = true;
        }
    },
}

</script>

<style scoped lang="scss">
    #page{
        min-height: 100%;padding: 10px;
        background: #f3f3f3;
    }
    .small{
        width: 50px;
    }
</style>
